<template>
  <list-layout>
    <div class="app-container">
      <div class="container-header">
        <div class="header-left">
          {{$t('abnormalMaterial.abnormal')}}
        </div>
      </div>
      <el-tabs type="border-card"
               class="mt10"
               v-model="activeName"
               @tab-click="()=>handleTabClick()">
        <el-tab-pane :label="$t('abnormalMaterial.oneCheck')"
                     name="0">
          <bar-chart v-if="activeName === '0'"
                     :chartData="chartData"
                     height="400px"
                     width="100%" />
        </el-tab-pane>
        <el-tab-pane :label="$t('abnormalMaterial.twoCheck')"
                     name="1">
          <bar-chart v-if="activeName === '1'"
                     :chartData="chartData"
                     height="400px"
                     width="100%" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </list-layout>
</template>
<script>
import {
  materialMiddleStatistics
} from '@/api/specimenManagement/specimen'
import BarChart from './BarChart'

export default {
  name: 'abnormalMaterial',
  components: { BarChart },
  data () {
    return {
      chartData: [],
      activeName: '0',
      chart: null,
      // 查询参数
      queryParams: {
        checkout: 1,
        startTime: this.getPeriousDate(),
        endTime: this.getNowDate(),
      },
    }
  },
  created () {
    this.switchTab()
  },
  methods: {
    handleTabClick () {
      this.switchTab()
    },
    switchTab () {
      const { activeName } = this
      switch (activeName) {
        case '0':
          this.queryParams.checkout = 1
          break
        case '1':
          this.queryParams.checkout = 2
          break
      }
      materialMiddleStatistics(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.chartData = response.data
        }
      })
    },
    getNowDate () {
      var date = new Date()
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      //  当前日期
      return (
        y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
      )
    },
    getPeriousDate () {
      var today = new Date()
      var targetday_milliseconds =
        today.getTime() - 1000 * 60 * 60 * 24 * 30
      today.setTime(targetday_milliseconds) //注意，这行是关键代码
      var tYear = today.getFullYear()

      var tMonth = today.getMonth()

      var tDate = today.getDate()

      tMonth = this.doHandleMonth(tMonth + 1)

      tDate = this.doHandleMonth(tDate)

      return tYear + '-' + tMonth + '-' + tDate
    },
    doHandleMonth (month) {
      var m = month

      if (month.toString().length == 1) {
        m = '0' + month
      }

      return m
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-card {
    padding-top: 20px;
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding-bottom: 20px;
}
::v-deep .el-aside {
    padding: 0;
    margin-bottom: 0;
}
.content-style {
    border: 0px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    background-color: white;
    margin-top: 10px;
}
::v-deep .el-button-group .selBtn {
    background: #fff;
    border: 1px solid #0b7be3;
    color: #0b7be3;
}
::v-deep .el-button-group .unselBtn {
    background: #fff;
    border: 1px solid #ededf2;
    color: #666666;
}
.header-left {
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    padding: 3px 0 10px;
    display: inline-flex;
    justify-content: center;
    border-bottom: 2px solid #0b7be3;
}
.header-right {
    float: right;
    ::v-deep .el-input__suffix {
        top: 1px;
    }
}
.container-header {
    border-bottom: 1px solid #ededf2;
}
.container-table {
    float: left;
    //margin-top:6px;
    width: 100%;
}
.mb8 {
    float: left;
    margin-top: 6px;
    width: 100%;
}
.drawer-footer {
    display: flex;
    position: relative;
    z-index: 9999;
    bottom: -40px;
    height: 40px;
    justify-content: center;
    width: 100%;
}
.drawer-close {
    background: #f7f8fa;
    border-color: #f7f8fa;
}

.mt10 ::v-deep .el-tabs__header {
    background-color: #fff;
}
.mt10 ::v-deep .is-active {
    border-top: 1px solid #1890ff;
}
.right-btns ::v-deep .el-button {
    margin-top: 0;
}
.app-container {
    padding: 0;
}
.table-action-wrap {
    padding: 12px 0;
}
</style>
